<script lang="ts" setup>
import type { RangeValue } from 'ant-design-vue/es/vc-picker/interface';
import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';
import { reactive, ref } from 'vue';

type RangeValue = [Dayjs, Dayjs] | undefined;
// javascript
const state = reactive({
  value: "d",
  date: undefined as RangeValue
});

</script>

<!-- 日期统计过滤组件 -->
<template>
  <section class="date-statistic-filter-cpm">
    <a-radio-group v-model:value="state.value">
      <a-radio-button value="d">本日</a-radio-button>
      <a-radio-button value="w">本周</a-radio-button>
      <a-radio-button value="m">本月</a-radio-button>
    </a-radio-group>

    <a-range-picker v-model:value="state.date" />
  </section>
</template>

<style lang="less" scoped>
// less
.date-statistic-filter-cpm {
  .ant-radio-group {
    margin-right: 20px;
  }
}
</style>